<!--
 * @Author: mokevip
 * @Date: 2020-09-14 09:24:16
 * @LastEditors: mokevip
 * @LastEditTime: 2020-09-14 11:00:40
 * @Description: 
-->
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <title>爱刷题</title>
    <!-- vConsole 移动端调试工具 -->
    <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
      var vConsole = new window.VConsole();
    </script> -->
    <link rel="stylesheet" href="./css/iview.css">
    <style>
        body {
            line-height: 1.4rem;
        }

        .process {
            display: flex;
            margin: 2vw 3vw;
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
        }
        
        .process .info {
            flex-grow: 1;
            align-content: flex-end;
            align-items: center;
        }
        .process .btn {
            color: #a7a7a7;
            border: 1px solid #a7a7a7;
            border-radius: 1vw;
            font-size: 3vw;
            padding: 0 1.5vw;
        }
        .process .btn.active {
            background: #2d8cf0;
            color: white;
            border: 1px solid #2d8cf0;
        }

        .timu {
            width: 96vw;
            margin: 2vw auto;
        }

        .option {
            margin: 0 0 2vw;
            line-height: 2rem;
            letter-spacing: 0.1rem;
        }

        .option .item {
            /* padding: 0 2vw; */
            border-radius: 0.6vw;
            display: flex;
        }
        
        .option .item label {
            /* 设置固定长度 */
            width: 6vw;
            /* 序号居中对齐 */
            text-align: center;
            /* 空间不被压缩 */
            flex-shrink: 0;
        }
        
        .option .item div {
            /* 使用剩余空间 */
            flex-grow: 1;
            /* 不换行，可滚动，隐藏滚动条 */
            white-space: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .option .active {
            background-color: blanchedalmond;
        }

        .type {
            font-size: 0.6rem;
            color: white;
            border-radius: 15px;
            padding: 0px 5px;
            letter-spacing: 0.1rem;
            text-indent: 0.2rem;
            background-color: #1890ff;
            display: inline-block;
            margin-right: 6px;
            line-height: 20px;
        }

        .huida {
            width: 96vw;
            display: block;
            margin: 4vw auto;
        }

        .result {
            margin: 2vw 0 3vw;
            position: relative;
            padding: 8px 48px 8px 16px;
            border-radius: 4px;
            color: #515a6e;
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 10px;
        }

        .result.success {
            border: 1px solid #8ce6b0;
            background-color: #edfff3;
        }

        .result.warning {
            border: 1px solid #ffd77a;
            background-color: #fff9e6;
        }

        .result.info {
            border: 1px solid #abdcff;
            background-color: #f0faff;
        }

        .answer {
            white-space: pre-line;
        }

        .analysis {
            margin-top: 1vw;
        }

        .pageControl {
            text-align: center;
            display: block;
            margin-top: 20px;
        }

        .ivu-card-head p {
            overflow: inherit;
            white-space: inherit;
            line-height: 24px;
        }

        .ivu-message-notice-content-text {
            display: block !important;
        }
    </style>
</head>

<body>
    <div id="el">
        <div class='process'>
            <div class="info">
                {{typeName}}:
                <span v-if="this.type != 'infinite'">
                    <!-- 第{{page+1}}题，共{{pageData.length}}题 -->
                    {{page+1}}/{{pageData.length}}题
                </span>
                <span v-if="this.type == 'infinite'" style="font-weight: bold;">
                    <!-- 第{{page+1}}题 -->
                    <!-- <span style="color: #40c300">答对{{correctCount}}题</span> -->
                    <!-- <span style="color: red;">答错{{incorrectCount}}题</span> -->
                    <span style="color: #40c300">{{correctCount}}</span>/<span style="color: red;">{{incorrectCount}}</span>
                </span>
            </div>
            <div :class="['btn', {active: skip}]" v-if="type != 'recite'" @click="skip = !skip">自动跳过</div>
        </div>
        <Card class='timu'>
            <p slot="title">
                <label class='type' v-if="timu.option">
                    {{timu.option.length?(timu.answer.length===1?'单选':'多选'):(timu.answer.length>16?'简答':'填空')}}
                </label>
                {{timu.title}}
            </p>
            <!-- <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
                Change
            </a> -->
            <div class="option">
                <div v-for="(i,k) in timu.option" v-key='k' @click='select(k)' :class='daan.indexOf(k)!=-1 ? "item active" : "item"'>
                    <label>{{zidian[k]}}. </label>
                    <div>{{i}}</div>
                </div>
            </div>
            <div type="success" v-if='answer && result === 1' class='result success'>恭喜回答正确</div>
            <div type="warning" v-if='answer && result === 0' class='result warning'>抱歉回答错误了哦！</div>
            <div v-if='answer&&result===2' class='result info'>{{(String(timu.answer).length>16?'简答':'填空')}}题暂不支持回答
            </div>
            <div v-if='answer' class="answer">答案：{{timu.answer}}</div>
            <div v-if='answer' class="analysis">解析：{{timu.analysis?timu.analysis:'该答案暂无解析'}}</div>
        </Card>
        <i-button class="huida" type="primary" :disabled='daan.length===0' v-if="type != 'recite'" @click='huida' size="large" long >确定答案</i-button>
        <i-button class="huida" type="success" v-if='sessionStorage.type == "wrong"' @click='del' size="large" long>
            我已学会，不再显示
        </i-button>
        <ButtonGroup class="pageControl">
            <i-button type="primary" @click="prev">
                上一题
            </i-button>
            <i-button type="primary" @click="next">
                下一题
            </i-button>
        </ButtonGroup>
    </div>
    <script src="./js/public.js?version=1.0"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/iview.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
        const vue = new Vue({
            el: "#el",
            data: {
                skip: true,
                fileId: '',
                fileName: '',
                type: '',
                typeName: '',
                sourceData: [],
                pageData: [],
                page: 0,
                timu: {},
                zidian: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                daan: [],
                correctCount: 0,
                incorrectCount: 0,
                answer: false,
                result: false
            },
            methods: {
                // 选择答案
                select(k) {
                    if (this.daan.indexOf(k) != -1) {
                        this.daan.splice(this.daan.findIndex(item => item === k), 1);
                    } else {
                        //单选同时只能选一项
                        if (String(this.timu.answer).length === 1) {
                            this.daan = [];
                        }
                        this.daan.push(k)
                    }
                },
                // 确定答案
                huida() {
                    // 获取该题目的标准答案
                    let answer = this.timu.answer.split('')
                    this.result = 1;
                    this.timu.result = 1;
                    // 多选-如果回答数量与答案数量对不上，则回答错误
                    if (this.daan.length != answer.length) {
                        this.result = 0;
                        this.timu.result = 0;
                    } else {
                        // 数量对上但答案没对上，也回答错误
                        for (i in this.daan) {
                            if (answer.indexOf(this.zidian[this.daan[i]]) == -1) {
                                this.result = 0;
                                this.timu.result = 0;
                            }
                        }
                    }
                    // 正确跳转下一题，错误记录错题ID
                    if (this.result) {
                        this.correctCount++;
                        if (this.skip) setTimeout(() => this.next(), 800)
                    } else {
                        //错题ID记录
                        this.incorrectCount++;
                        if (!localStorage["wrong_" + this.fileId]) {
                            localStorage["wrong_" + this.fileId] = JSON.stringify([])
                        }
                        let wrong = JSON.parse(localStorage["wrong_" + this.fileId])
                        if (wrong.indexOf(this.timu.id) == -1) {
                            wrong.push(this.timu.id)
                            localStorage["wrong_" + this.fileId] = JSON.stringify(wrong)
                        }
                    }
                    // 显示回答结果，记录回答结果
                    this.answer = true;
                    this.timu.daan = this.daan;
                },
                // 恢复答题进度
                recovery(type) {
                    if (localStorage[type + '_' + this.fileId] && Number(localStorage[type + '_' + this.fileId])) {
                        const num = Number(localStorage[type + '_' + this.fileId])
                        this.$Modal.confirm({
                            title: '恢复刷题进度',
                            content: '检测到你上次答到第' + (num + 1) + '题，是否继续？',
                            onOk: () => {
                                this.page = num
                                this.initTimu()
                            }
                        })
                    }
                },
                // 删除错题
                del() {
                    let wrong = JSON.parse(localStorage["wrong_" + this.fileId])
                    let index = wrong.indexOf(this.timu.id)
                    wrong.splice(index, 1)
                    localStorage["wrong_" + this.fileId] = JSON.stringify(wrong)
                    this.$Message.success('删除错题记录成功！');
                    window.location.reload();
                },
                // 上一题
                prev() {
                    if (this.page !== 0) {
                        this.page -= 1;
                        this.initTimu()
                    } else {
                        this.$Message.info('已经在第一题了');
                    }
                },
                // 下一题
                next() {
                    // 无尽模式下需要自行补充题库
                    if (this.type == 'infinite' && this.page + 1 == this.pageData.length) {
                        this.pageData.push(this.randomExtractQuestion());
                    }
                    // 下一题
                    if (this.page + 1 < this.pageData.length) {
                        this.page += 1;
                        this.initTimu()
                    } else {
                        this.$Message.info('已经在最后一题了');
                    }
                },
                // 题目控制
                initTimu() {
                    this.timu = this.pageData[this.page];
                    this.daan = [];
                    this.answer = false;
                    // 简答题直接显示解析和答案
                    if (this.timu.option.length == 0) {
                        this.answer = true;
                        this.result = 2;
                    }
                    // 背题模式直接显示解析和答案
                    if (sessionStorage.type == "recite") {
                        this.answer = true;
                        this.result = 3; //不显示结果框
                    }
                    // 如果这道题已回答过，显示回答记录
                    if (this.timu.daan != null && this.timu.daan.length > 0) {
                        this.daan = this.timu.daan;
                        this.answer = true;
                        this.result = this.timu.result;
                    }

                    // 记录答题题号，用于中途打断后恢复进度
                    if (sessionStorage.type === 'order') {
                        localStorage['order_' + this.fileId] = this.page
                    }
                    if (sessionStorage.type === 'recite') {
                        localStorage['recite_' + this.fileId] = this.page
                    }
                },
                // 打乱数组顺序
                randomArray(array) {
                    var m = array.length,
                        t, i;
                    while (m) {
                        i = Math.floor(Math.random() * m--);
                        t = array[m];
                        array[m] = array[i];
                        array[i] = t;
                    }
                    return array;
                },
                // 随机抽取一题
                randomExtractQuestion() {
                    const randonInt = Math.floor(Math.random() * this.sourceData.length);
                    return this.copyDeep(this.sourceData[randonInt]);
                },
                // 将现有数组中的错题提取出来
                wrongArray(array) {
                    let wrong = JSON.parse(localStorage["wrong_" + this.fileId])
                    let result = [];
                    for (let i in wrong) {
                        for (let j in array) {
                            if (wrong[i] === array[j].id) {
                                result.push(array[j]);
                            }
                        }
                    }
                    //错题乱序返回
                    return this.randomArray(result);
                },
                // 深拷贝对象
                copyDeep(obj) {
                    return JSON.parse(JSON.stringify(obj));
                }
            },
            created() {
                this.fileName = sessionStorage.file
                this.fileId = sessionStorage.id
                if (!this.fileName) {
                    window.location.href = "./index.html"
                }
                axios.get('./json/' + this.fileName).then((response) => {
                    this.sourceData = response.data;
                    this.pageData = this.copyDeep(response.data);
                    this.type = sessionStorage.type;
                    switch(this.type) {
                        // 错题模式
                        case "wrong":
                            this.typeName = "错题模式"
                            // 在题库中筛选出错误的题目
                            if (localStorage["wrong_" + this.fileId] && localStorage["wrong_" + this.fileId] != "[]") {
                                this.pageData = this.wrongArray(this.pageData)
                            } else { // 如果没有错题
                                this.$Message.error('您暂时无错题记录，已自动为您选择乱序答题模式');
                                sessionStorage.type = "random";
                            }
                            break;
                        // 乱序答题
                        case "random":
                            this.typeName = "乱序答题"
                            this.pageData = this.randomArray(this.pageData)
                            break;
                        // 无尽模式
                        case "infinite":
                            this.typeName = "无尽模式"
                            this.pageData = [this.randomExtractQuestion()];
                            break;
                        // order、recite 顺序答题 and 背题模式
                        default:
                            this.typeName = this.type == "order" ? "顺序答题" : "背题模式"
                            this.recovery(sessionStorage.type)
                    }

                    // 初始化题目
                    this.initTimu();
                }).catch(error => this.$Message.error('发生错误！'));
            }
        })
    </script>
</body>

</html>